<template>
  <div class="visual">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <e-charts v-show="chartsShow" :chartsShow="chartsShow"></e-charts>
    <!-- <sphere-viewer v-show="panorama" ref="sphere" :panorama=panorama></sphere-viewer> -->
    <gaode-map></gaode-map>
    <div class="charts-button">
      <el-button type="info" icon="el-icon-date" circle @click="show()"></el-button>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  // import SphereViewer from '@/components/SphereViewer'
  import GaodeMap from '@/components/GaodeMap'
  import ECharts from '@/components/ECharts'
  export default {
    name: 'home',
    data() {
      return {
        chartsShow: false
      }
    },
    methods: {
      show() {
        // this.$refs.sphere.PSV.destroy()
        this.chartsShow = !this.chartsShow
        // console.log(this.$refs.sphere)
      }
    },
    components: {
      ECharts,
      // SphereViewer,
      GaodeMap
    }
  }
</script>
<style lang="less">
  .visual {
    // display: flex;
    // /*垂直居中*/
    // // align-items: center;
    // /*水平居中*/
    // justify-content: center;

    .charts-button {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
  }

  // .sphere-viewer {
  //   position: absolute;
  //   z-index: 99;
  //   top: 100px;
  //   left: 20px;
  //   width: 500px;
  //   height: 500px;
  // }
</style>